<template>
  <!--  条件查询-->
  <el-form :inline="true" :model="rz" >
    <el-form-item label="真实姓名：">
      <el-input v-model="rz.name" />
    </el-form-item>
    <el-form-item label="身份证号：">
      <el-input v-model="rz.idCardNo" />
    </el-form-item>
    <el-form-item label="审核状态">
      <el-select
        v-model="rz.checkStatus"
        placeholder="Select"
        size="large"
        style="width: 240px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="认证状态">
      <el-select
        v-model="rz.certificationStatus"
        placeholder="Select"
        size="large"
        style="width: 240px"
      >
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button @click="restart()">重置</el-button>
      <el-button type="primary" @click="show()">搜索</el-button>
    </el-form-item>
  </el-form>


  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="id" label="服务人员id" width="180" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="idCardNo" label="身份证号" width="180" />
    <el-table-column prop="frontImg" label="身份证正面" width="180" #default="scope">
      <el-avatar shape="square" :size="100" :fit="fit" :src=scope.row.frontImg />
    </el-table-column>
    <el-table-column prop="backImg" label="身份证反面" width="180"  #default="scope">
      <el-avatar shape="square" :size="100" :fit="fit" :src=scope.row.backImg />
    </el-table-column>
    <el-table-column prop="certificationMaterial" label="证明资料" width="180" #default="scope" >
      <el-avatar shape="square" :size="100" :fit="fit" :src=scope.row.certificationMaterial />
    </el-table-column>
    <el-table-column prop="checkStatus" label="审核状态" widt0h="150" #default="scope">
      <el-button link v-if="scope.row.checkStatus == 0">待审核</el-button>
      <el-button link v-else>已审核</el-button>
    </el-table-column>
    <el-table-column prop="certificationStatus" label="认证状态" width="150" #default="scope">
        <el-button link v-if="scope.row.certificationStatus==0" type="danger">初始态</el-button>
        <el-button link v-else-if="scope.row.certificationStatus==1" type="success">认证中</el-button>
        <el-button link v-else-if="scope.row.certificationStatus==2" type="success">认证成功</el-button>
        <el-button link v-else-if="scope.row.certificationStatus==3" type="danger">认证失败</el-button>
    </el-table-column>
    <el-table-column prop="reviewTime" label="审核时间" width="170" />
    <el-table-column prop="applicationTime" label="申请时间" width="170" />

    <el-table-column label="操作" width="180" #default="scope">
<!--      <el-button link type="primary" text="primary">申请记录</el-button>-->
      <el-button link type="primary" text="primary" @click="tg(scope.row.id)">通过</el-button>
      <el-button link type="primary" text="primary" @click="bh(scope.row.id)">驳回</el-button>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:current-page="rz.pageNum"
    v-model:page-size="rz.pageSize"
    :page-sizes="[5, 10, 15, 20]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script setup>
import {ref} from "vue";
import {rzProviderList,boh,tongg} from '@/api/serveProvider/renzheng'
import {ElMessage} from "element-plus";

const total=ref(0)
const rz=ref({
  pageNum:1,
  pageSize:5
})
const handleSizeChange = (val ) => {
  rz.value.pageSize=val
  show()
}
const handleCurrentChange = (val ) => {
  rz.value.pageNum=val
  show()
}


const tableData = ref([])
// 审核状态
const options = [
  {
    value: 1,
    label: '已审核',
  },
  {
    value: 0,
    label: '待审核',
  }
]


// 认证状态
const options1 = [
  {
    value: 0,
    label: '初始态',
  },
  {
    value: 1,
    label: '认证中',
  },
{
  value: 2,
    label: '认证成功',
},
{
  value: 3,
    label: '认证失败',
}
]


function show(){
  rzProviderList(rz.value).then(res=>{
    tableData.value=res.data.data.records
    total.value=res.data.data.total
  })
}
show()


// 重置
function restart(){
  rz.value.name='',
    rz.value.idCardNo='',
    rz.value.checkStatus=null,
    rz.value.certificationStatus=null
}


// 通过
function tg(id){
  tongg(id).then(res=>{
    if(res.data.code==200){

      ElMessage.success(res.data.errorMessage)
      show()
    }else{
      ElMessage.error(res.data.errorMessage)
    }
  })
}

// 驳回
function bh(id){
  boh(id).then(res=>{
    if(res.data.code==200){
      console.log(res)
      ElMessage.success(res.data.errorMessage)
      show()
    }else{
      ElMessage.error(res.data.errorMessage)
    }
  })
}
</script>

